<div class="agent-list-directive">
	<div class="searchbox">
		<input type="text" ng-model="searchAgents.name" placeholder="Search Agents"/>
		<span class="glyphicon glyphicon-question-sign agentListTooltip"></span>
	</div>
	<div ng-show="showStatistic" ng-click="selectApplication()" ng-class="{active: currentAgent == null}" class="application">
		<span class="label label-info">BETA</span>
		<div><span>A</span>{{getApplicationName()}}</div>
	</div>
	<div class="scroll-wrapper">
		<div class="scroll-inner-wrapper">
			<ul class="nav nav-list">
				<li ng-repeat="(key, group) in agentGroup">
					<h5 class="nav-header" tooltip="{{key}}" tooltip-placement="bottom">
						<span class="glyphicon glyphicon-home"></span>
						{{key}}
					</h5>
					<ul class="nav nav-pills nav-stacked" style="font-size:12px">
						<li ng-class="{active: currentAgent == agent}" ng-repeat="agent in group | filter:searchAgents.name">
							<a href ng-click="selectAgent(agent)">
								<span class="glyphicon glyphicon-hdd"></span>
								{{agent.agentId}}
								<span class="glyphicon glyphicon-{{getState(agent.status.state.code)}}" style="color:{{getStateColor(agent.status.state.code)}}"></span>
							</a>
						</li>
					</ul>
				</li>
			</ul>
		</div>
	</div>
</div>